<template>
  <div>
    <Card title="场景结果" :bordered="false" :dis-hover="true">
      <Form
        inline
        label-position="right"
        :label-width="100"
        :model="testsuiteResult"
      >
        <Row>
          <Col span="6">
            <FormItem label="场景名称">
              <label
                class="
                  ivu-input-wrapper
                  ivu-input-wrapper-default
                  ivu-input-type-text
                  ivu-input
                  ivu-input-default
                "
                >{{ testsuiteResult.testsuite_name }}</label
              >
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="所属项目">
              <label
                class="
                  ivu-input-wrapper
                  ivu-input-wrapper-default
                  ivu-input-type-text
                  ivu-input
                  ivu-input-default
                "
                >{{ testsuiteResult.project_name }}</label
              >
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="执行人">
              <label
                class="
                  ivu-input-wrapper
                  ivu-input-wrapper-default
                  ivu-input-type-text
                  ivu-input
                  ivu-input-default
                "
              >
                {{ testsuiteResult.executor_real_name }}
              </label>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="执行时间">
              <DatePicker
                type="date"
                readonly
                :value="testsuiteResult.execute_time"
                format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="用例总数">
              <Input readonly :value="testsuiteResult.total_num" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="成功数量">
              <Input readonly :value="testsuiteResult.passed_num" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="失败数量">
              <Input readonly :value="testsuiteResult.failed_num" />
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="执行耗时(ms)">
              <Input readonly :value="testsuiteResult.elapsed_ms" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="6">
            <FormItem label="测试结果">
              <Input
                v-if="testsuiteResult.status === 'PASS'"
                readonly
                value="全部通过"
                class="input-call-pass"
              />
              <Input
                v-else-if="testsuiteResult.status === 'PARTIAL_PASS'"
                readonly
                value="部分通过"
                class="input-call-partial-pass"
              />
              <Input
                v-else-if="testsuiteResult.status === 'FAIL'"
                readonly
                value="全部失败"
                class="input-call-fail"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card title="用例结果" :bordered="false" :dis-hover="true">
      <div slot="extra">
        <span class="card-extra-item">
          <Icon size="24" :color="statusColor['PASS']" type="ios-leaf" />通过
        </span>
        <span class="card-extra-item">
          <Icon size="24" :color="statusColor['FAIL']" type="ios-leaf" />失败
        </span>
      </div>
      <Table
        :columns="testcaseResultColumns"
        :data="testcaseResultData"
        border
        size="small"
        :tooltip-max-width="500"
      >
        <template slot-scope="{ row }" slot="project|api">
          <Tooltip placement="bottom" transfer :max-width="500">
            <div slot="content" style="white-space: normal">
              项目：{{ row.project_name }}
              <br />
              接口：{{ row.api_name }}
            </div>
            {{ row.project_name }} - {{ row.api_name }}
          </Tooltip>
        </template>
        <template slot-scope="{ row }" slot="status">
          <Icon size="24" :color="statusColor[row.status]" type="ios-leaf" />
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            type="text"
            style="color: #2d8cf0"
            @click="showDetails(row)"
            >详情</Button
          >
        </template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
  </div>
</template>

<script>
import { getTestsuiteResultById } from "@/api/HttpAutoTestService/testsuite-result";
import { getTestcaseResults } from "@/api/HttpAutoTestService/testcase-result";

export default {
  name: "testsuite-result-detail",
  mounted() {
    this.testsuiteResult.id = this.$route.query.id;
    this.getTestsuiteResultById(this.testsuiteResult.id);
    this.getTestcaseResults({ testsuite_result: this.testsuiteResult.id });
  },
  data() {
    return {
      statusColor: {
        PASS: "#19be6b",
        FAIL: "#ed4014",
      },
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
      testsuiteResult: {
        id: "",
      },
      testcaseResultColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left",
        },
        {
          title: "用例名称",
          key: "testcase_name",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "项目|接口",
          slot: "project|api",
          width: 350,
          ellipsis: true,
          align: "center",
        },
        {
          title: "请求URL",
          key: "url",
          width: 350,
          tooltip: true,
          align: "center",
        },
        {
          title: "执行时间",
          key: "execute_time",
          align: "center",
          width: 150,
        },
        {
          title: "响应状态码",
          key: "actual_status_code",
          align: "center",
          width: 100,
        },
        {
          title: "响应时长(ms)",
          key: "elapsed_ms",
          align: "center",
          width: 120,
        },
        {
          title: "响应结果",
          key: "actual_response_data",
          minWidth: 350,
          align: "center",
          ellipsis: true,
        },
        {
          title: "输出变量结果",
          key: "output_result",
          minWidth: 350,
          align: "center",
          ellipsis: true,
        },
        {
          title: "失败原因",
          key: "failure_reason",
          minWidth: 350,
          align: "center",
          ellipsis: true,
        },
        {
          title: "测试结果",
          slot: "status",
          align: "center",
          width: 85,
          fixed: "right",
        },
        {
          title: "操作",
          slot: "action",
          width: 80,
          align: "center",
          fixed: "right",
        },
      ],
      testcaseResultData: [],
    };
  },
  methods: {
    getTestsuiteResultById(id) {
      getTestsuiteResultById(id).then((res) => {
        this.testsuiteResult = res.data;
      });
    },
    getTestcaseResults(page) {
      let data = {
        page: 1,
        page_size: this.page.pageSize,
        testsuite_result: this.testsuiteResult.id,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getTestcaseResults(data)
        .then((res) => {
          const data = res.data;
          this.testcaseResultData = data.results.reverse();
          this.page.total = data.count;
          if (data.next === null) {
            this.page.current = Math.ceil(this.page.total / this.page.pageSize);
          }
          if (data.previous === null) {
            this.page.current = 1;
          }
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },
    showDetails(row) {
      const id = row.id;
      this.$router.push({
        name: "testcase_result_detail",
        query: { id: id },
      });
    },
    change(val) {
      this.page.current = val;
      this.getTestcaseResults(val);
    },
    pageSizeChange(val) {
      this.page.pageSize = val;
      this.getTestcaseResults();
    },
  },
};
</script>

<style scoped>
.input-call-pass :nth-last-child(1) {
  color: #19be6b !important;
}

.input-call-partial-pass :nth-last-child(1) {
  color: #ff9900 !important;
}

.input-call-fail :nth-last-child(1) {
  color: #ed4014 !important;
}
.ivu-form-item {
  width: 100%;
}
</style>
